<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="600px"
                :close-on-click-modal=false
                @close="close"
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="排序">
                    <el-input v-model.trim="form.sort" autocomplete="off" type="number" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名" :required="true" prop="trueName">
                    <el-input v-model.trim="form.trueName" autocomplete="off" placeholder="请输入员工姓名"></el-input>
                </el-form-item>
                <el-form-item label="登录账号" prop="userName" :required="true">
                    <el-input v-model.trim="form.userName" autocomplete="off" placeholder="请输入登录账号"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="passWord" :required="true">
                    <el-input v-model.trim="form.passWord" type="password" autocomplete="off"
                              placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item label="所属用户组" prop="role_id" :required="true">
                    <el-select v-model="form.role_id" clearable filterable allow-create placeholder="请选择">
                        <el-option v-for="item in yhzOptions" :key="item.id" :label="item.role_name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联微信管理员" v-if="app">
                  <el-select v-model="form.merchantId" clearable filterable  placeholder="请选择关联微信管理员">
                    <el-option v-for="item in merchantUser" :key="item.id" :label="`${item.userName}（ID:${item.id}）`" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {userSave, getRoleList,getUserInfo} from "@/api/setup";
    import {getMerchantUser} from "@/api/shop";

    export default {
        name: "goodlistedit",
        created() {
        },
        data() {
            return {
                form: {
                    name: "",
                    sort: "1",
                    passWord: "",
                    role_id: '',
                    merchantId: '',
                    trueName: '',
                },
                merchantUser:[],
                app:'',
                yhzOptions: [],
                content: '',
                title: "",
                dialogFormVisible: false,
            }
        },
        methods: {
            async showEdit(row) {
                const {data} = await getRoleList();
                this.yhzOptions = data
                if (!row) {
                    this.title = "添加";
                  const { data } = await getMerchantUser();
                  this.app = data.app?data.app:'';
                  this.merchantUser = data.merchantUser?data.merchantUser:[]
                } else {
                    this.title = "编辑";
                    const {data} = await getUserInfo({id:row.id});
                    this.app = data.app?data.app:'';
                    this.merchantUser = data.merchantUser?data.merchantUser:[]
                    this.form = Object.assign({}, data);
                }
                this.dialogFormVisible = true;
            },
            setStoreId(storeId){
                this.form.storeId = storeId
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.type = 2
                        const {msg} = await userSave(this.form);
                        this.$baseMessage(msg, "success");
                        this.$emit("fetchData");
                        this.close();
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
